<template>
  <div class="lot readonly" v-loading="loading">
    <el-row
      type="flex"
      :justify="$route.query.is_sealed == 2?'end':'start'"
      style="margin-bottom:10px;"
    >
      <div class="d-center">
        <el-button size="medium" type="primary" @click="add()" v-if="$route.query.is_sealed == 1">新增</el-button>
      </div>
      <div class="d-center" style="margin-left:10px;">
        <el-button
          size="medium"
          :type="selectData.length>0?'danger':'info'"
          @click="del()"
          v-if="$route.query.is_sealed == 1"
        >删除</el-button>
      </div>
      <el-button size="medium" type="info" v-if="$route.query.is_sealed == 2">已封存</el-button>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%;border:1px solid #ccc;"
      height="86%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column label="项目名称" show-overflow-tooltip align="center">
        <template>
          <span>{{$route.query.xmmc}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ssbd_id"
        label="所属标段"
        show-overflow-tooltip
        align="center"
        :formatter="formatter"
      ></el-table-column>
      <el-table-column prop="ht_mc" label="合同名称" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="ht_bh" label="合同编号" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="jfdw" label="甲方单位" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="乙方单位" align="center" show-overflow-tooltip :formatter="formatter1"></el-table-column>
      <el-table-column
        prop="ht_qdrq"
        label="合同签订日期"
        show-overflow-tooltip
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ht_je"
        label="合同金额（万元）"
        show-overflow-tooltip
        width="150"
        align="center"
      ></el-table-column>

      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            size="medium"
            type="primary"
            plain
            @click="edit(scope.row)"
          >{{$route.query.is_sealed == 1?"编辑":"查看"}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Contractdialog :dialogFormVisible1="dialogFormVisible1" @close="close1" :item="item" :Bd="Bd" />
    <transition name="delpop">
      <delPop @close="visible = false" v-if="visible" :data="deldata" />
    </transition>
  </div>
</template>

<script>
import Contractdialog from "./dialog/Contractdialog.vue";
import delPop from "@/components/delPop";

export default {
  components: {
    Contractdialog,
    delPop
  },
  data() {
    return {
      dialogFormVisible1: false,
      selectData: [],
      tableData: [],
      loading: false,
      item: {},
      Bd: [],
      visible: false,
      deldata: {}
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    edit(item) {
      this.dialogFormVisible1 = !this.dialogFormVisible1;
      this.item = item;
    },
    look(item) {
      this.dialogFormVisible1 = !this.dialogFormVisible1;
      this.item = item;
    },
    add() {
      this.dialogFormVisible1 = !this.dialogFormVisible1;
      this.item = {};
    },
    close1(item) {
      this.dialogFormVisible1 = false;
      if (item) {
        this.search();
      }
    },
    formatter(row) {
      let vv;
      this.Bd.forEach(v => {
        if (v.id == row.ssbd_id) {
          vv = v.bdmc;
        }
      });
      return vv;
    },
    formatter1(row) {
      let vv;
      this.Bd.forEach(v => {
        if (v.id == row.ssbd_id) {
          vv = v.zbdw_obj.dwmc;
        }
      });
      return vv;
    },
    del() {
      if (!this.selectData.length) {
        this.$message({
          type: "error",
          message: "没有选中的条目"
        });
        return;
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$post("/api/QqHtgl/deletesall", { id: this.selectData }).then(
            res => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.search();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSelectionChange(value) {
      this.selectData = value;
    },
    search() {
      this.loading = true;
      this.$get("/api/QqBdgl/index", { xm_id: this.xm_id }).then(ress => {
        if (ress.code == 200 && ress.data) {
          this.Bd = [...ress.data];
          this.$get("/api/QqHtgl/index", { xm_id: this.xm_id }).then(res => {
            if (res.code == 200 && res.data) {
              this.tableData = res.data;
            }
          });
        }
        this.loading = false;
      });
    }
  },
  computed: {
    xm_id() {
      return this.$route.query.xm_id || this.$route.params.xm_id;
    },
    xmmc() {
      return this.$route.query.xmmc;
    }
  },
  watch: {
    xm_id() {
      this.search();
    }
  }
};
</script>

<style scoped lang="less">
.lot {
  width: 100%;
  height: 92%;
}
</style>